<div id="attr-tip" class="tip" style="height: 340px;">
    <div class="tiptop"><span>属性编辑对话框</span><a></a></div>
    <div class="tipinfo" style="padding-right: 85px;">
        <input id="attr-key" type="text" class="dfinput"
               style="width: 355px;box-sizing: border-box;margin-bottom: 10px;"
               placeholder="属性键名"/>
        <input id="attr-value" type="text" class="dfinput"
               style="width: 355px;box-sizing: border-box;margin-bottom: 10px;"
               placeholder="属性键值"/>

        <textarea id="attr-intro"
                  style="width:355px;height:100px;border:solid 1px #a7b5bc;background:url(../imgs/inputbg.gif) repeat-x; padding:10px; line-height:20px;box-sizing: border-box;resize: none;"
                  placeholder="属性使用备注，请详细介绍此属性的用途！"></textarea>
    </div>
    <div class="tipbtn" style="position: absolute;bottom: 20px;right: 0px;">
        <button class="sure">确&nbsp;&nbsp;定</button>
        <a href="#" class="cancel">取&nbsp;&nbsp;消</a>
    </div>
</div>
<script type="text/javascript">
    /**
     *属性添加对话框
     */
    var attrDlg = (function () {

        var keyElem = $("#attr-key");
        var valElem = $("#attr-value");
        var introElem = $("#attr-intro");

        var callBack = null;    //回调函数
        var idHash;      //关联的组件ID

        //初始化对话框的关闭按钮
        $("#attr-tip a").click(closeDlg);
        $("#attr-tip .cancel").click(closeDlg);
        $("#attr-tip .sure").click(confirmDlg);

        /**
         * 打开添加属性的对话框
         * flag = 标识
         * callback = 回调
         * def = 默认值
         */
        function openDlg(id, jsonStr, callback) {
            if (jsonStr) {
                var defObj = JSON.parse(jsonStr);
                keyElem.val(defObj.key);
                valElem.val(defObj.val);
                introElem.val(defObj.intro);
            } else {
                keyElem.val("");
                valElem.val("");
                introElem.val("");
            }

            idHash = id;
            callBack = callback;


            $("#attr-tip").fadeIn(200);
        }

        /**
         * 取消对话框
         */
        function closeDlg() {
            if (callBack) {
                callBack(0);
            }
            $("#attr-tip").fadeOut(100);
        }

        /**
         * 确认对话框
         */
        function confirmDlg() {
            var obj = new Object();
            obj.key = keyElem.val();
            obj.val = valElem.val();
            obj.intro = introElem.val();

            if (callBack) {
                callBack(1, obj, idHash);
            }
            $("#attr-tip").fadeOut(100);
        }

        return {
            openAttrDlg: openDlg,
            closeAttrDlg: closeDlg
        };
    })();

    if (typeof window.Dialog != "undefined") {
        window.Dialog.assign({}, attrDlg);
    } else {
        window.Dialog = attrDlg;
    }
</script>